<template>
	<view class="countDown">
		<u-count-down :time="time" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
			<view class="countDown-time">
				{{timeData.days}}天{{timeData.hours}}时{{timeData.minutes}}分{{timeData.seconds}}秒
				<!-- <view class="list-item-activity-crad-item-time">{{hour[0]}}</view>
				<view class="list-item-activity-crad-item-time">{{hour[1]}}</view>
				:
				<view class="list-item-activity-crad-item-time" style="margin-left: 8rpx;">{{minutes[0]}}</view>
				<view class="list-item-activity-crad-item-time">{{minutes[1]}}</view>
				:
				<view class="list-item-activity-crad-item-time" style="margin-left: 8rpx;">{{seconds[0]}}</view>
				<view class="list-item-activity-crad-item-time">{{seconds[1]}}</view> -->
			</view>
		</u-count-down>
	</view>
</template>

<script>
	export default {
		props:{
			time: {
				type: Number,
				default:() => 0  //12* 60 * 60 * 1000
			}
		},
		data() {
			return {
				timeData: {},
			}
		},
		computed:{
			hour(){
				let t = []
				if(this.timeData.hours>10) {
					t = this.splitNumber(Number(this.timeData.hours))
				} else {
					t = [0,this.timeData.hours]
				}
				return t
			},
			minutes(){
				let t = []
				if(this.timeData.minutes>10) {
					t = this.splitNumber(Number(this.timeData.minutes))
				} else {
					t = [0,this.timeData.minutes]
				}
				return t
			},
			seconds(){
				let t = []
				if(this.timeData.seconds>10) {
					t = this.splitNumber(Number(this.timeData.seconds))
				} else {
					t = [0,this.timeData.seconds]
				}
				return t
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
				//console.log('倒计时',e)
			},
			splitNumber(number) {
			    if (number >= 10 && number <= 99) { // 确保是两位数
			        const tens = Math.floor(number / 10); // 提取十位数
			        const ones = number % 10; // 提取个位数
			        return [tens, ones];
			    } else {
			        throw new Error("The number is not a two-digit number");
			    }
			},
		}
	}
</script>

<style scoped lang="scss">
	.countDown {
		.countDown-time {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #211C1E;
			display: flex;
			align-items: center;
			view {
				width: 47rpx;
				height: 51rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				border: 2px solid #DBDFE1;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #211C1E;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 8rpx;
			}
		}
		
	}
</style>